/*大屏*/
//自调用函数
(function () {
  // 1、页面一加载就要知道页面宽度计算
  var setFont = function () {
    // 因为要定义变量可能和别的变量相互冲突，污染，所有用自调用函数
    var html = document.documentElement; // 获取html
    // 获取宽度
    var width = html.clientWidth;

    // 判断
    if (width < 1024) width = 1024;
    if (width > 1920) width = 1920;
    // 设置html的基准值
    var fontSize = width / 80 + "px";
    // 设置给html
    html.style.fontSize = fontSize;
  };
  setFont();
  // 2、页面改变的时候也需要设置
  // 尺寸改变事件
  window.onresize = function () {
    setFont();
  };
})();

(function () {
  //事件委托
  $(".monitor").on("click", " a", function () {
    //点击当前的a 加类名 active  他的兄弟删除类名
    $(this).addClass("active").siblings().removeClass("active");
    //获取一一对应的下标
    var index = $(this).index();
    //选取content 然后狗日对应下标的 显示   当前的兄弟.content隐藏
    $(".content").eq(index).show().siblings(".content").hide();
  });
  //滚动
  //原理：把marquee下面的子盒子都复制一遍 加入到marquee中
  //      然后动画向上滚动，滚动到一半重新开始滚动
  //因为选取的是两个marquee  所以要遍历
  $(".monitor .marquee").each(function (index, dom) {
    //将每个 的所有子级都复制一遍
    var rows = $(dom).children().clone();
    //再将新的到的加入原来的
    $(dom).append(rows);
  });
})();
(function () {
  var myechart = echarts.init($(".pie")[0]);
  option = {
    // 控制提示
    tooltip: {
      // 非轴图形，使用item的意思是放到数据对应图形上触发提示
      trigger: "item",
      // 格式化提示内容：
      // a 代表图表名称 b 代表数据名称 c 代表数据  d代表  当前数据/总数据的比例
      formatter: "{a} <br/>{b} : {c} ({d}%)",
    },
    // 控制图表
    series: [
      {
        // 图表名称
        name: "故障类型",
        // 图表类型
        type: "pie",
        // 南丁格尔玫瑰图 有两个圆  内圆半径10%  外圆半径70%
        // 百分比基于  图表DOM容器的半径
        radius: ["10%", "80%"],
        // 图表中心位置 left 50%  top 50% 距离图表DOM容器
        center: ["50%", "50%"],
        // 半径模式，另外一种是 area 面积模式
        roseType: "radius",
        // 数据集 value 数据的值 name 数据的名称
        data: [
          { value: 230, name: "一般故障" },
          { value: 180, name: "水控故障" },
          { value: 190, name: "电力故障" },
          { value: 187, name: "空调故障" },
        ],
        //文字调整
        label: {
          fontSize: 15,
        },
        //引导线
        labelLine: {
          length: 8,
          length2: 10,
        },
      },
    ],
    color: ["#00FF7F", "#ed8884", "#ff9f7f", "#0096ff"],
  };
  myechart.setOption(option);
})();

// 员工出勤天数统计
(function () {
  // 师傅名单（姓氏 + 师傅）
  const teachers = [
    "张师傅",
    "王师傅",
    "李师傅",
    "赵师傅",
    "陈师傅",
    "周师傅",
    "吴师傅",
    "郑师傅",
    "黄师傅",
    "刘师傅",
    "孙师傅",
    "朱师傅",
    "何师傅",
  ];

  // 示例数据（可根据实际数据替换）- 每个数组包含 13 个值
  const presentDays = [22, 20, 18, 24, 21, 19, 23, 20, 17, 21, 23, 22, 20]; // 出勤天数
  const leaveDays = [3, 2, 1, 2, 1, 3, 2, 1, 2, 1, 0, 2, 1]; // 请假天数
  const absentDays = [1, 2, 3, 1, 2, 1, 0, 1, 3, 0, 1, 1, 2]; // 缺勤天数

  option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      formatter: (params) => {
        return (
          `${params[0].name}<br/>` +
          `出勤: ${params[0].value}<br/>` +
          `请假: ${params[1].value}<br/>` +
          `缺勤: ${params[2].value}`
        );
      },
    },
    legend: {
      show: true,
      top: "-1.8%",
      left: "center",
      data: ["出勤", "请假", "缺勤"],
      textStyle: {
        color: "#00BFFF",
      },
    },
    grid: {
      left: "0%",
      right: "1%",
      bottom: "1%",
      top: "7%",
      containLabel: true,
      show: true,
      // borderColor: "rgba(0, 240, 255, 0.3)",
    },
    xAxis: [
      {
        type: "category",
        data: teachers,
        axisTick: {
          alignWithLabel: false,
          show: false,
        },
        axisLabel: {
          show: true, // 显示所有标签
          color: "#00BFFF",
          rotate: 45, // 旋转标签，避免重叠
          margin: 15, // 增加标签与图表的间距
          interval: 0, // 不跳过任何标签（强制全部显示）
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        axisTick: {
          show: false,
        },
        axisLabel: {
          color: "#4c9bfd",
        },
        splitLine: {
          lineStyle: {
            color: "rgba(0, 240, 255, 0.3)",
          },
        },
      },
    ],
    series: [
      {
        name: "出勤",
        type: "bar",
        barWidth: "25%",
        itemStyle: {
          color: "#00fffb", // 出勤 - 蓝色
        },
        data: presentDays,
      },
      {
        name: "请假",
        type: "bar",
        barWidth: "25%",
        itemStyle: {
          color: "#ffa500", // 请假 - 橙色
        },
        data: leaveDays,
      },
      {
        name: "缺勤",
        type: "bar",
        barWidth: "25%",
        itemStyle: {
          color: "#ff4757", // 缺勤 - 红色
        },
        data: absentDays,
      },
    ],
  };

  var myechart = echarts.init($(".users .bar")[0]);
  myechart.setOption(option);
})();

//报修次数价值统计
(function () {
  var data = {
    day365: { orders: "3419", amount: "99834" },
    day90: { orders: "1689", amount: "8634" },
    day30: { orders: "987", amount: "3234" },
    day1: { orders: "26", amount: "834" },
  };
  //点击事件
  $(".order").on("click", ".filter a", function () {
    //点击之后加类名
    $(this).addClass("active").siblings().removeClass("active");
    // 先获取点击a的 data-key自定义属性
    var key = $(this).attr("data-key");
    //获取自定义属性
    // data{}==>data.shuxing data['shuxing]
    key = data[key]; //
    $(".order .item h4:eq(0)").text(key.orders);
    $(".order .item h4:eq(1)").text(key.amount);
  });
  //定时器
  var index = 0;
  var aclick = $(".order a");
  setInterval(function () {
    index++;
    if (index > 3) {
      index = 0;
    }
    //每san秒调用点击事件
    aclick.eq(index).click();
  }, 3000);
})();
// 东西区次数统计
(function () {
  // 初始化图表配置
  var option = {
    tooltip: {
      trigger: "axis",
    },
    xAxis: {
      type: "category",
      data: [], // 动态生成
      axisTick: { show: false },
      axisLabel: { color: "#4c9bfd" },
      axisLine: { show: false },
      boundaryGap: false,
    },
    yAxis: {
      type: "value",
      axisTick: { show: false },
      axisLabel: { color: "#4c9bfd" },
      axisLine: { show: false },
      boundaryGap: false,
    },
    legend: {
      textStyle: { color: "#4c9bfd" },
      right: "10%",
    },
    grid: {
      show: true,
      top: "20%",
      left: "3%",
      right: "4%",
      bottom: "3%",
      borderColor: "#012f4a",
      containLabel: true,
    },
    series: [
      {
        name: "预期报修数",
        data: [],
        type: "line",
        smooth: true,
        itemStyle: { color: "#00f2f1" },
      },
      {
        name: "实际报修数",
        data: [],
        type: "line",
        smooth: true,
        itemStyle: { color: "#ed3f35" },
      },
    ],
  };

  // 初始化图表
  var myechart = echarts.init($(".line")[0]);
  myechart.setOption(option);

  // 数据源
  var data = {
    yearly: [
      // 东区预期报修数
      [300, 340, 380, 420, 480],
      // 西区实际报修数
      [0, 0, 360, 400, 450],
    ],
    year: [
      // 东区12个月预期报修数
      [20, 25, 30, 35, 40, 45, 50, 55, 50, 45, 40, 35],
      // 西区12个月实际报修数
      [18, 22, 28, 33, 38, 43, 48, 52, 47, 42, 37, 32],
    ],
    month: [
      // 东区当月5天一单位的预期报修数
      [15, 20, 25, 30, 35],
      // 西区当月5天一单位的实际报修数
      [12, 18, 22, 28, 32],
    ],
    week: [
      // 东区当周7天预期报修数
      [5, 7, 9, 12, 10, 8, 6],
      // 西区当周7天实际报修数
      [4, 6, 8, 10, 9, 7, 5],
    ],
  };

  // 动态生成 x 轴数据
  function generateXAxisData(type) {
    const now = new Date();
    const year = now.getFullYear();
    const month = now.getMonth() + 1;

    switch (type) {
      case "yearly":
        return [year - 4, year - 3, year - 2, year - 1, year].map((y) =>
          y.toString()
        );
      case "year":
        return [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月",
        ];
      case "month":
        const daysInMonth = new Date(year, month, 0).getDate();
        const labels = [];
        for (let i = 1; i <= daysInMonth; i += 5) {
          labels.push(i + "日");
        }
        return labels;
      case "week":
        return ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
      default:
        return [];
    }
  }

  // 更新图表数据和 x 轴
  function updateChart(type) {
    const datasets = data[type];
    option.series[0].data = datasets[0];
    option.series[1].data = datasets[1];
    option.xAxis.data = generateXAxisData(type);
    myechart.setOption(option);
  }

  // 设置默认选中项
  $('.caption a[data-type="yearly"]')
    .addClass("active")
    .siblings("a")
    .removeClass("active");

  // 初始化图表为“近年”数据
  updateChart("yearly");

  // 点击事件处理
  $(".sales .caption a").on("click", function () {
    $(this).addClass("active").siblings("a").removeClass("active");
    const type = $(this).attr("data-type");
    updateChart(type);
  });

  // 自动切换
  let index = 0;
  const timer = setInterval(() => {
    index = (index + 1) % 4; // 假设共有4个选项
    $(".caption a").eq(index).click();
  }, 4000);
})();

(function () {
  var data = [
    { name: "李师傅", num: "65" },
    { name: "王师傅", num: "23" },
    { name: "张师傅", num: "43" },
    { name: "马师傅", num: "22" },
    { name: "刘师傅", num: "10" },
    { name: "宋师傅", num: "69" },
  ];
  $(".inner").on("mouseenter", ".sup li", function () {
    $(this).addClass("active").siblings().removeClass("active");
    //获取随机的值  sort方法 是给数组排序 a-b是从小到大
    //.5-随机0-1的数 可能为正可能为负 排序就会随机
    var radomData = data.sort(function (a, b) {
      return 0.5 - Math.random();
    });
    var html = "";
    radomData.forEach(function (item) {
      html += `<li><span>${item.name}</span><span>${item.num} <s class="icon-up"></s></span></li>`;
    });
    //渲染
    $(".sub").html(html);
  });
  $(".province .sup li").eq(0).mouseenter();
  var index = 0;
  var timer = setInterval(() => {
    index++;
    if (index > 5) {
      index = 0;
    }
    $(".sup li").eq(index).mouseenter();
  }, 2000);
})();
